<template>
  <ul class="todo-main">
    <transition-group name="todo">
      <TodoItem v-for="todobj in todos" :key="todobj.id"
                :todo="todobj" />
    </transition-group>
  </ul>
</template>
<script>
import TodoItem from "./TodoItem";

export default {
  name: "TodoList",
  components:{TodoItem},
  props:["todos" ]
}
</script>

<style scoped>
.todo-leave-active{
  animation: showhideh2 1s reverse;
}
.todo-enter-active{
  animation: showhideh2 1s ;
}
@keyframes showhideh2 {
  from{transform: translateX( -100px)}
  to{transform: translateX(0px)}
}
</style>
